<template>
  <div class="acehone">
    <el-tabs>
      <el-form :model="formlink">
        <el-form-item label="发布时间">
          <el-date-picker v-model="formlink.value1" type="month" placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="ip地址">
          <el-select v-model="formlink.region" placeholder="ip地址">
           
          </el-select>
        </el-form-item>
        <el-form-item label="文章类别">
          <el-select v-model="formlink.type" placeholder="文章类别">

          </el-select>
        </el-form-item>
        <el-button class="accesson" @click="hubmiche">搜索</el-button>
        <el-button class="acihone" @click="hetmin">重置</el-button>
      </el-form>
      <!-- 表单 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column label="文章名称" prop="title" width="230">
        </el-table-column>
        <el-table-column label="文章类别" prop="category.channel" width="230">
          <template v-slot="{row}">
            {{ funasdrads(row.category.channel) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="发布者" width="180">
        </el-table-column>
        <el-table-column label="IP地址" prop="thumbsUp" width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          style="width: 20%"
          :filters="[
            { text: '已上线', value: '已上线' },
            { text: '待审核', value: '待审核' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template v-slot="{row}">
            <el-tag
              :type="row.status === 'WaitAudit' ? 'warning' : 'info'"
              disable-transitions
            >
              {{ fnusdasda(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="发布时间" width="210">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="hsublmet(row)"
              >查看详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>
  </div>
</template>

<script>
import { getUserInfo } from "@/api/roles";
import employeesConst from "@/constant/employees";
const hireTypeMap = {};
employeesConst.hireTypyees.forEach((item) => {
  hireTypeMap[item.status] = item.value;
  hireTypeMap[item.channel] = item.value;
});
export default {
  data() {
    return {
      formlink: {
        value1: "",
        region: "",
        type: "",
      },
      list: [],
      q: {
        index: 1,
        size: 3,
      },
    };
  },
  created() {
    this.loached();
  },
  methods: {
    async loached() {
      const res = await getUserInfo(this.q);
      // console.log(res);
      this.list = res.data.data;
    },
    filterTag(value, row) {
      return row.status === value;
    },
    // 渲染状态
    fnusdasda(code){
      return hireTypeMap[code]
    },
    // 分类渲染
    funasdrads(code){
      return hireTypeMap[code]
    },
    // 搜索
    hubmiche(){
       this.timer = []
      let chunts = [];
         let Yr = this.formlink.value1.getFullYear()
      this.timer.push(Yr)
       let Mn = this.formlink.value1.getMonth()+1
      if(Mn<10){
        Mn="0"+Mn
      }
      this.timer.push(Mn)
     this.formlink.value1 = this.timer.join('-');
       console.log('777',this.formlink.value1);
        if (this.formlink.value1.trim() !== "") {
        chunts = this.list.filter((value) => {
          return value.createTime.indexOf(this.formlink.value1) !== -1;
        });
        this.list = chunts;
      }
    },
    // 重置
    hetmin(){
       this.formlink.value1 = ''
       this.loached()
    },
    // 查看详细
    hsublmet(row) {
      console.log(row);
      this.$router.push({
        path: "/home/check",
        query: { row },
      });
    },
  },
};
</script>

<style scoped>
.acehone {
  background-color: #fff;
}

.el-input {
  width: 70%;
  height: 30px;
}
.el-form-item {
  margin-left: 20px;
  display: inline-block;
  width: 300px;
}
.el-form {
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
}
.accesson {
     background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
  color: #fff;
}
.accesson:hover {
    background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
  color: #fff;
}
.el-button--text {
  color: #ff7144;
}
.acihone:hover {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
.acihone:focus {
  background-color: rgb(255, 248, 243);
  color: #ff7144;
  border: 1px solid rgb(255, 190, 132);
}
</style>
